import React from 'react';
import { Card, Table } from 'antd';

// 模拟销售统计数据
const salesData = [
  { key: '1', product: '产品A', category: '电子产品', salesVolume: 1250, revenue: 250000, growthRate: '12.5%', month: '2023-05' },
  { key: '2', product: '产品B', category: '家居用品', salesVolume: 850, revenue: 170000, growthRate: '8.3%', month: '2023-05' },
  { key: '3', product: '产品C', category: '办公用品', salesVolume: 680, revenue: 136000, growthRate: '15.2%', month: '2023-05' },
  { key: '4', product: '产品D', category: '电子产品', salesVolume: 1020, revenue: 204000, growthRate: '9.8%', month: '2023-05' },
  { key: '5', product: '产品E', category: '家居用品', salesVolume: 740, revenue: 148000, growthRate: '6.7%', month: '2023-05' },
];

// 定义表格列
const salesColumns = [
  { title: '产品名称', dataIndex: 'product', key: 'product' },
  { title: '产品类别', dataIndex: 'category', key: 'category' },
  { title: '销售数量', dataIndex: 'salesVolume', key: 'salesVolume' },
  { title: '销售收入', dataIndex: 'revenue', key: 'revenue', render: (text: number) => `¥${text.toLocaleString()}` },
  { title: '增长率', dataIndex: 'growthRate', key: 'growthRate' },
  { title: '统计月份', dataIndex: 'month', key: 'month' },
];

const SalesStatistics: React.FC = () => {
  return (
    <div>
      <h1 style={{ marginBottom: '24px' }}>销售统计详情</h1>
      <Card variant="outlined">
        <div style={{ padding: '20px 0', display: 'flex', justifyContent: 'center' }}>
          <p style={{ fontSize: '18px', color: '#666' }}>销售趋势统计图表</p>
        </div>
        <Table 
          columns={salesColumns} 
          dataSource={salesData} 
          pagination={{ pageSize: 10 }} 
          rowKey="key"
        />
      </Card>
    </div>
  );
};

export default SalesStatistics;